<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>  
window.addEventListener("load", function(evt) {
    var output = document.getElementById("output");
    var input = document.getElementById("input");
    var ws;
    var print = function(message) {
        var d = document.createElement("div");
        d.innerHTML = message;
        output.appendChild(d);
    };
    document.getElementById("open").onclick = function(evt) {
        if (ws) {
            return false;
        }

        ws = new WebSocket("ws://0.0.0.0:7777/ws");
        
        ws.onopen = function(evt) {
        	var SendId = document.getElementById("SendId").value
        	var ReceiveId = document.getElementById("ReceiveId").value
        	var sendMessage = '{"SendId":"'+SendId+'","ReceiveId":"'+ReceiveId+'"}'
        	print("OPEN");
        	ws.send(sendMessage);
            
        }
        ws.onclose = function(evt) {
            print("CLOSE");
            ws = null;
        }
        ws.onmessage = function(evt) {
            if(evt.data == 'heart'){

            }else{
                print("RESPONSE: " + evt.data);
            }
            
        }
        ws.onerror = function(evt) {
            print("ERROR: " + evt.data);
        }
        return false;
    };
    document.getElementById("send").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        print("SEND: " + input.value);
        ws.send(input.value);
        return false;
    };
    document.getElementById("close").onclick = function(evt) {
        if (!ws) {
            return false;
        }
        ws.close();
        return false;
    };
});
</script>
</head>
<body>
<table>
<tr><td valign="top" width="50%">
请输入你的id
<input type="text" id="SendId"><br/>
请输入发送方的id
<input type="text" id="ReceiveId">
<form>
<button id="open">Open</button>
<button id="close">Close</button>
<p><input id="input" type="text" value=''>
<button id="send">Send</button>
</form>
</td><td valign="top" width="50%">
<div id="output"></div>
</td></tr></table>
</body>
</html>